<template>
  <div class="app-container-flex">
    <NewFullScreen v-model="showDialog" :title="title">
      <template v-slot:full-button>
        <el-button
          v-if="infoList.data.status === 'disabled'"
          :plain="true"
          @click="clickModify"
          >修改</el-button
        >
      </template>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <basic-information :info="infoList"> </basic-information>
        </div>
      </div>
    </NewFullScreen>
  </div>
</template>

<script setup name="codingDetails">
import { getCoreCodeDetails } from '@/api/core.js'
const props = defineProps({
  visible: {},
  id: {},
})
const emits = defineEmits()

const title = ref('编码详情')
const infoList = ref({
  data: {},
  fieldList: [
    { label: '编码名称', value: 'name' },
    { label: '编码类型', value: 'typeValue' },
    { label: '前缀', value: 'prefix' },
    { label: '序列长度', value: 'length' },
    { label: '编号示例', value: 'codeSample' },
    { label: '状态', value: 'statusValue' },
    {
      label: '备注',
      value: 'remark',
      type: 'popover',
    },
  ],
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    // 更新父组件visible
    emits('update:visible', val)
  },
})

watch(
  () => props.visible,
  (val) => {
    showDialog.value = val
  },
  {
    immediate: true,
  }
)

onMounted(() => {
  init()
})

function init() {
  getCoreCodeDetails(props.id).then((res) => {
    if (res) {
      infoList.value.data = res.data
    }
  })
}
function clickModify() {
  emits('callback', 'edit')
}
</script>

<style scoped></style>
